<template>
  <div>
    <app-header></app-header>
    <home-swiper :list="swiperSlides"></home-swiper>
    <home-icons :list="iconsList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>
<script>
import axios from "axios"
import {mapState} from "vuex"
import AppHeader from 'components/home/Header'
import HomeSwiper from 'components/home/Swiper'
import HomeIcons from 'components/home/Icons'
import HomeRecommend from 'components/home/Recommend'
import HomeWeekend from 'components/home/Weekend'
export default {
  name: 'Home',
  data(){
    return{
       swiperSlides:[],
       iconsList:[]
       ,recommendList:[]
       ,weekendList:[]
       ,lastCity:""
    }
  },
  computed:{
     ...mapState(['city'])
  },
  components:{
    AppHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  methods:{
    getHomeInfo (){
      axios.get("/api/travel/index.json?city= " + this.city)
      .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res){
      res=res.data
      if(res.ret && res.data){
         const data=res.data
         this.swiperSlides=data.swiperSlides
         this.iconsList=data.iconsList
         this.recommendList=data.recommendList
         this.weekendList=data.weekendList
      }
    }
  },
  mounted (){
     this.lastCity=this.city
     this.getHomeInfo();
  },
  activated (){
    if(this.lastCity!==this.city){
        this.lastCity=this.city
        this.getHomeInfo();   
    }
  }
}
</script>
